<template>
	<view class="padding_30">
		<view class="pay-item flex" v-for="(item,idex) in recordsList" :key="item.id">
			<view class="pay-type">
				<view class="type">
					{{item.title}}
				</view>
				<view class="pay-time">
					{{item.createtime}}
				</view>
			</view>
			<view class="pay-total">
				<view class="total-item">
					<text class="total">{{item.amount}}</text>
					<image src="@/pages/user/static/images/bill.png" mode="widthFix" v-if="item.money_type==1"></image>
					<image src="@/pages/user/static/images/dou.png" mode="widthFix" v-if="item.money_type==2"></image>
				</view>
		<!-- 		<view class="success-state" v-if="item.tips=='提现成功'">
					提现成功
				</view>
				<view class="err-state" v-if="item.tips=='提现失败'">
					提现失败
				</view>
				<view class="ing-state" v-if="item.tips=='提现中'">
					提现中
				</view> -->
				<!-- <view class="pay-time">
					{{item.tips}}
				</view> -->
			</view>
		</view>
		<uv-load-more :status="loadStatus" />
	</view>
</template>

<script setup>
	import {onLoad,onReachBottom} from '@dcloudio/uni-app'
	import {useUserStore} from '@/store/modules/user.js'
	import { ref } from 'vue';
	const userstore = useUserStore()
	const page = ref(1)
	const loadStatus = ref('loadmore')
	const recordsList = ref([])
	onLoad(()=>{
		page.value = 1
		recordsList.value = []
		getMoneyRecordsList()
	})
	onReachBottom(()=>{
		if(loadStatus.value=='nomore'){
			return
		}
		page.value++
		getMoneyRecordsList()
	})
	const getMoneyRecordsList = async()=>{
		loadStatus.value = 'loading'
		let res = await userstore.getMoneyRecordsList({page:page.value})
		if(res.code==200&&res.data){
			let list = res.data.data
			recordsList.value = recordsList.value.concat(res.data.data)
			// 判断是否还有数据
			if(res.data.current_page>=res.data.last_page){
				loadStatus.value = 'nomore'
			}else{
				loadStatus.value = 'loadmore'
			}
		}else{
			loadStatus.value = 'nomore'
		}
	}
</script>

<style lang="scss" scoped>
	.pay-item:nth-child(1){
		padding-top: 0;
	}
	.pay-item{
		justify-content: space-between;
		align-items: start;
		border-bottom: 1rpx solid #eee;
		padding: 30rpx 0;
		.pay-time{
			padding-top: 12rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		.pay-type{
			.type{
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
		}
		.pay-total{
			.total-item{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.total{
					font-weight: bold;
					font-size: 32rpx;
					color: #222222;
				}
				image{
					margin-left: 12rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}
			.success-state{
				
				padding-top: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #67C23A;
			}
			.err-state{
				font-weight: 400;
				font-size: 24rpx;
				color: #FE3052;
			}
			.ing-state{
				font-weight: 400;
				font-size: 24rpx;
				color: #E6A23C;
			}
		}
	}

</style>